<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>sortable table by drag and drop</title>
<style type="text/css" media="screen" rel="Stylesheet"><!--
	.drag_handle{ background-color: #89756A; padding: 0px; margin: 2px; width:20px; height:16px; cursor: pointer; }
	.even{ background-color: #AAA; }
	.odd{ background-color: #EEE; }
--></style>
<script language="javascript" type="text/javascript" charset="UTF-8" src="../../lib/railties/prototype.js" ></script>
<script language="javascript" type="text/javascript" charset="UTF-8" src="../../src/table_sort.js" ></script>
</head>
<body>
テーブルを一発で並び替えするテスト
<div style="margin-top:100px;"></div>
<table id="table0" class="dad_sortable" border="1" cellspacing="0" cellpadding="0" bordercolor="black">
	<thead>
		<tr>
            <th><a href="javascript:void(0)" id="table0_head_id">ID</a></th>
			<th><a href="javascript:void(0)" id="table0_head_name">名前</a></th>
            <th>
			     <a href="javascript:void(0)" id="table0_head_url">URL</a>
			     <input type="checkbox" checked="checked" id="toggle_reversible_table0_url">reversible</a>
            </th>
		</tr>
	</thead>
	<tbody>
		<tr><td class="col_id">1</td><td class="col_name">The Serverside.com</td><td class="col_url">http://www.theserverside.com/</td></tr>
		<tr><td class="col_id">2</td><td class="col_name">Eclipse.org</td><td class="col_url">http://www.eclipse.org/</td></tr>
		<tr><td class="col_id">3</td><td class="col_name">MSDN</td><td class="col_url">http://msdn.microsoft.com/</td></tr>
		<tr><td class="col_id">4</td><td class="col_name">IBM developerWorks</td><td class="col_url">http://www-06.ibm.com/jp/developerworks/</td></tr>
		<tr><td class="col_id">5</td><td class="col_name">codehaus</td><td class="col_url">http://codehaus.org/</td></tr>
	</tbody>
</table>
<script language="JavaScript" type="text/javascript"><!--
var sorter0 = new HTMLTableElement.Sort($("table0"), {"rememberRows": true});
new HTMLTableElement.Sort.Trigger($("table0_head_id"), sorter0, new HTMLTableElement.Sort.AsNumber(new HTMLTableElement.Sort.InnerText("col_id"))); 
new HTMLTableElement.Sort.Trigger($("table0_head_name"), sorter0, new HTMLTableElement.Sort.InnerText("col_name")); 
var urlTrigger = new HTMLTableElement.Sort.Trigger($("table0_head_url"), sorter0, new HTMLTableElement.Sort.InnerText("col_url"));
Event.observe($("toggle_reversible_table0_url"), "click", function(event){ 
  urlTrigger.options["reversible"] = $("toggle_reversible_table0_url").checked;
}, false); 
--></script>
HTMLTableElement.Sort.InnerTextの第2引数がundefinedなので、大文字と小文字を区別しています。


<br/><br/><br/>

<div id="tables">
<table id="table1" class="dad_sortable" border="1" cellspacing="0" cellpadding="0" bordercolor="black">
	<thead>
		<tr>
			<th width="20">&nbsp;</th>
			<th><a href="javascript:void(0)" id="table1_head_id">ID</a></th>
			<th><a href="javascript:void(0)" id="table1_head_name">名前</a></th>
			<th><a href="javascript:void(0)" id="table1_head_url">URL</a></th>
		</tr>
	</thead>
	<tbody>
		<tr class="even">
		  <td><div class="drag_handle"><img id="img1" src="stock-media-stop.png" height="20" ondragstart="return false;"/></div></td>
		  <td class="col_id">1</td>
		  <td class="col_name">prototype.js</td>
		  <td class="col_url">http://prototype.conio.net/</td>
        </tr>
		<tr class="odd">
		  <td><div class="drag_handle"><img id="img1" src="stock-media-stop.png" height="20" ondragstart="return false;"/></div></td>
		  <td class="col_id">2</td>
		  <td class="col_name">script.aculo.us</td>
		  <td class="col_url">http://script.aculo.us/</td>
	    </tr>
		<tr class="even">
		  <td><div class="drag_handle"><img id="img1" src="stock-media-stop.png" height="20" ondragstart="return false;"/></div></td>
		  <td class="col_id">3</td>
		  <td class="col_name">Rico</td>
		  <td class="col_url">http://openrico.org/</td>
		</tr>
		<tr class="odd">
		  <td><div class="drag_handle"><img id="img1" src="stock-media-stop.png" height="20" ondragstart="return false;"/></div></td>
		  <td class="col_id">4</td>
		  <td class="col_name">Ruby</td>
		  <td class="col_url">http://www.ruby-lang.org/</td>
		</tr>
		<tr class="even">
		  <td><div class="drag_handle"><img id="img1" src="stock-media-stop.png" height="20" ondragstart="return false;"/></div></td>
		  <td class="col_id">5</td>
		  <td class="col_name">Ruby on Rails</td>
		  <td class="col_url">http://www.rubyonrails.org/</td>
		</tr>
	</tbody>
</table>

----------------------  separation  ------------------------

<table id="table2" class="dad_sortable" border="1" cellspacing="0" cellpadding="0" bordercolor="black">
	<thead>
		<tr>
			<th width="20">&nbsp;</th>
			<th><a href="javascript:void(0)" id="table2_head_id">ID</a></th>
			<th><a href="javascript:void(0)" id="table2_head_name">名前</a></th>
			<th><a href="javascript:void(0)" id="table2_head_url">URL</a></th>
		</tr>
	</thead>
	<tbody>
		<tr class="odd">
		  <td><div class="drag_handle"><img id="img1" src="stock-media-stop.png" height="20" ondragstart="return false;"/></div></td>
		  <td class="col_id">6</td>
		  <td class="col_name">java</td>
		  <td class="col_url">http://java.sun.com/</td>
		</tr>
		<tr class="even">
		  <td><div class="drag_handle"><img id="img1" src="stock-media-stop.png" height="20" ondragstart="return false;"/></div></td>
		  <td class="col_id">7</td>
		  <td class="col_name">apache httpd</td>
		  <td class="col_url">http://httpd.apache.org/</td>
		</tr>
		<tr class="odd">
		  <td><div class="drag_handle"><img id="img1" src="stock-media-stop.png" height="20" ondragstart="return false;"/></div></td>
		  <td class="col_id">8</td>
		  <td class="col_name">Tomcat</td>
		  <td class="col_url">http://tomcat.apache.org/</td>
		</tr>
		<tr class="even">
		  <td><div class="drag_handle"><img id="img1" src="stock-media-stop.png" height="20" ondragstart="return false;"/></div></td>
		  <td class="col_id">9</td>
		  <td class="col_name">JBoss</td>
		  <td class="col_url">http://labs.jboss.com/</td>
		</tr>
		<tr class="odd">
		  <td><div class="drag_handle"><img id="img1" src="stock-media-stop.png" height="20" ondragstart="return false;"/></div></td>
		  <td class="col_id">10</td>
		  <td class="col_name">Seasar</td>
		  <td class="col_url">http://www.seasar.org/</td>
		</tr>
	</tbody>
</table>
</div>
<script language="JavaScript" type="text/javascript"><!--
var sorter1 = new HTMLTableElement.Sort(["table1", "table2"]);
new HTMLTableElement.Sort.Trigger($("table1_head_id"), sorter1, new HTMLTableElement.Sort.AsNumber(new HTMLTableElement.Sort.InnerText("col_id")) ); 
new HTMLTableElement.Sort.Trigger($("table1_head_name"), sorter1, new HTMLTableElement.Sort.InnerText("col_name", true)); 
new HTMLTableElement.Sort.Trigger($("table1_head_url"), sorter1, new HTMLTableElement.Sort.InnerText("col_url")); 
--></script>
テーブルが二つ指定されても各テーブルの行数を変えずにソートできます。
名前に関してはTableSort.InnerTextの第2引数がtrueなので、大文字と小文字を区別していません。

<br/><br/><br/><br/>
<table id="table3" border="1" cellspacing="0" cellpadding="0">
	<thead>
		<tr>
		  <th><a href="javascript:void(0)" id="table3_head_id">ID</a></th>
		  <th colspan="3"><a href="javascript:void(0)" id="table3_head_categories">categories</a></th>
		</tr>
	</thead>
	<tbody>
		<tr>
		  <td class="col_id">7</td>
		  <td class="col_name1">apache.org</td>
		  <td class="col_name2">iBatis</td>
		  <td class="col_name3"></td>
		</tr>
		<tr>
		  <td class="col_id">10</td>
		  <td class="col_name1">eclipse.org</td>
		  <td class="col_name2">Top Level</td>
		  <td class="col_name3">Platform</td>
		</tr>
		<tr>
		  <td class="col_id">6</td>
		  <td class="col_name1">apache.org</td>
		  <td class="col_name2">Tomcat</td>
		  <td class="col_name3"></td>
		</tr>
		<tr>
		  <td class="col_id">11</td>
		  <td class="col_name1">eclipse.org</td>
		  <td class="col_name2">Top Level</td>
		  <td class="col_name3">JDT</td>
		</tr>
	
		<tr>
		  <td class="col_id">21</td>
		  <td class="col_name1">apache.org</td>
		  <td class="col_name2">httpd</td>
		  <td class="col_name3"></td>
        </tr>
		<tr>
		  <td class="col_id">12</td>
		  <td class="col_name1">apache.org</td>
		  <td class="col_name2">jakarta</td>
		  <td class="col_name3"></td>
	    </tr>
		<tr>
		  <td class="col_id">23</td>
		  <td class="col_name1">apache.org</td>
		  <td class="col_name2">jakarta</td>
		  <td class="col_name3">HiveMind</td>
		</tr>
		<tr>
		  <td class="col_id">34</td>
		  <td class="col_name1">apache.org</td>
		  <td class="col_name2">jakarta</td>
		  <td class="col_name3">POI</td>
		</tr>
		<tr>
		  <td class="col_id">58</td>
		  <td class="col_name1">eclipse.org</td>
		  <td class="col_name2"></td>
		  <td class="col_name3"></td>
		</tr>
		<tr>
		  <td class="col_id">29</td>
		  <td class="col_name1">eclipse.org</td>
		  <td class="col_name2">Top Level</td>
		  <td class="col_name3"></td>
		</tr>
		<tr>
		  <td class="col_id">5</td>
		  <td class="col_name1">apache.org</td>
		  <td class="col_name2">jakarta</td>
		  <td class="col_name3">Commons</td>
		</tr>
	</tbody>
</table>
<script language="JavaScript" type="text/javascript"><!--
var sorter2 = new HTMLTableElement.Sort("table3");
new HTMLTableElement.Sort.Trigger($("table3_head_id"), sorter2, new HTMLTableElement.Sort.AsNumber(new HTMLTableElement.Sort.InnerText("col_id")) ); 
new HTMLTableElement.Sort.Trigger($("table3_head_categories"), sorter2, 
    new HTMLTableElement.Sort.KeyJoin( [
        new HTMLTableElement.Sort.InnerText("col_name1", true),
        new HTMLTableElement.Sort.Reverse(new HTMLTableElement.Sort.InnerText("col_name2", true)),
        new HTMLTableElement.Sort.InnerText("col_name3", true)
    ] )
);
--></script>
複合キーのソートも可能です。
この例ではcategoriesの2番目だけ逆順を指定しています。

</body>
</html>
